<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>[[ ${wxJsapiTransferPaymentPage.subject} ]]</title>
    <link th:href="@{/static/css/public.css}" rel="stylesheet">
    <script th:src="@{/static/js/jquery-3.6.0.min.js}"></script>
    <script th:src="@{/static/js/rem.js}"></script>
    <style>
        body {
            padding: 0px;
            margin: 0px;
            background-color: rgb(244, 244, 244);
        }

        .content {
            display: flex;
            flex-direction: column;
        }

        .background_image {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;
            height: 5rem;
            background-image: url("../static/image/background.png");
        }

        .success_icon {
            width: 1.62rem;
        }

        .line {
            margin: .55rem .24rem .38rem;
            background-color: #95A8C0;
            width: 7.02rem;
            height: 0.2rem;
            border-radius: 0.1rem;
        }

        .info_box {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: -0.48rem auto;
            background-color: #fff;
            height: 5.1rem;
            width: 6.7rem;
        }

        .shadow {
            width: 100%;
            height: 0.25rem;
            background-image: linear-gradient(to bottom, rgba(138, 157, 185, 1), rgba(138, 157, 185, 0));
        }

        .price_box {
            margin-top: .43rem;
            color: #222222;
        }

        .unit {
            font-size: .36rem;
        }

        .price {
            font-size: .58rem;
        }

        .company {
            margin-top: .1rem;
            color: #555;
            font-size: .28rem;
        }

        .dashed {
            margin-top: 0.4rem;
            border-bottom: 0.01rem dashed #e9e9e9;
            width: 6.4rem;
        }

        .section {
            align-self: flex-start;
            margin-top: 0.6rem;
            margin-left: 0.5rem;
            font-size: 0.28rem;
        }

        .row {
            margin-bottom: 0.4rem;
        }

        .row_title {
            color: #666;
        }

        .row_key {
            color: #222;
        }

    </style>
    <script type="application/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script type="text/javascript" th:inline="javascript">
        function onBridgeReady() {
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest',
                {
                    "appId": [[ ${wxJsapiTransferPaymentPage.appId} ]],
                    // 时间戳，自1970年以来的秒数
                    "timeStamp": [[ ${wxJsapiTransferPaymentPage.timeStamp} ]],
                    // 随机串
                    "nonceStr": [[ ${wxJsapiTransferPaymentPage.nonceStr} ]],
                    "package": [[ ${wxJsapiTransferPaymentPage.package} ]],
                    //微信签名方式：
                    "signType": [[ ${wxJsapiTransferPaymentPage.signType} ]],
                    //微信签名
                    "paySign": [[ ${wxJsapiTransferPaymentPage.paySign} ]]
                },
                function (res) {
                    if (res.err_msg === "get_brand_wcpay_request:ok") {
                        // 使用以上方式判断前端返回,微信团队郑重提示：
                        // res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠
                        //alert("支付成功");
                        //alert("collectionAccountName--"+[[ ${collectionAccountName} ]]);
                        //alert("totalAmount--"+[[ ${totalAmount} ]]);
                        //alert("payType--"+[[ ${payType} ]]);
                        //alert("subject--"+[[ ${subject} ]]);
                        //alert("createTime--"+[[ ${createTime} ]]);
                        $(".content").show();
                    }
                }
            );
        }
        if (typeof WeixinJSBridge == "undefined") {
            if (document.addEventListener) {
                document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
            } else if (document.attachEvent) {
                document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
            }
        } else {
            onBridgeReady();
        }
    </script>
</head>
<body>
<div class="content" style="display: none;">
    <div class="background_image">
        <img th:src="@{/static/image/success.png}" alt="" class="success_icon">
        <div class="line"></div>
    </div>
    <div class="info_box">
        <div class="shadow">
        </div>
        <div class="price_box">
            <span class="unit">¥</span>
            <span class="price">[[ ${totalAmount} ]]</span>
        </div>
        <span class="company">[[ ${collectionAccountName} ]]</span>
        <div class="dashed"></div>
        <div class="section">
            <div class="row">
                <span class="row_title">付款方式：</span>
                <span class="row_value">微信</span>
            </div>

            <div class="row">
                <span class="row_title">类型说明：</span>
                <span class="row_value">[[ ${subject} ]]</span>
            </div>

            <div class="row">
                <span class="row_title">支付时间：</span>
                <span class="row_value">[[ ${createTime} ]]</span>
            </div>
        </div>
    </div>
</div>
</body>
</html>